import React, {Component} from 'react';
import '../css/successfuleCase.css';
import $ from 'jquery';

import xtdz from '../image/software.png';
import mobile from '../image/mobile.png';
import left_part from '../image/left_part.png';
import right_part from '../image/right_part.png';
import customized_icon from '../image/customized_icon.png';
import customized_icon1 from '../image/customized_icon1.png';
import customized_icon2 from '../image/customized_icon2.png';
import customized_icon3 from '../image/customized_icon3.png';
import {Consumer} from "../store";

class CustomizedService extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            currentMenu: 1
        };
    }

    render() {
        const {currentMenu} = this.state;
        return (
            <div style={{overflow: 'hidden'}}>
                <div className="customizedServiceHeader">
                </div>
                <div className="customizedSystem">
                    <div className="normalContainer">
                        <div className="customizedTitle">软件定制</div>
                        <div className="customizedSubTitle">
                            从专业角度辅助企业挖掘功能需求，让定制的软件成为您真正的得力助手
                        </div>
                        <div className="customizedSystemContainer">
                            <img src={xtdz} alt="xtdz"/>
                        </div>
                    </div>
                </div>
                {/*<div className="applicationDevelopment">*/}
                    {/*<div className="normalContainer">*/}
                        {/*<div className="customizedTitle">APP开发</div>*/}
                        {/*<div className="customizedSubTitle">*/}
                            {/*洞察行业行为特性，发掘用户需求，为企业打造专属的APP精品*/}
                        {/*</div>*/}
                        {/*<div className="customizedSystemContainer" style={{marginTop: 80, position: 'relative'}}>*/}
                            {/*<img src={app_img1} alt="app_img1" useMap={"#appMap"}/>*/}
                            {/*<div className="appClickItem appClickItem1">*/}

                            {/*</div>*/}
                            {/*<div className="appClickItem appClickItem2">*/}

                            {/*</div>*/}
                            {/*<div className="appClickItem appClickItem3">*/}

                            {/*</div>*/}
                            {/*<div className="appClickItem appClickItem4">*/}

                            {/*</div>*/}
                            {/*<div className="appClickItem appClickItem5">*/}

                            {/*</div>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                {/*</div>*/}
                <div className="weChatDevelopment">
                    <div className="normalContainer">
                        <div className="customizedTitle">微信开发</div>
                        <div className="customizedSubTitle">
                            从展示、推广、转化到成交，微信营销全过程设计，为企业打造全新消费体验
                        </div>
                        <div className="weChatDevelopmentMenu">
                            <div
                                className={currentMenu === 1 ? "weChatDevelopmentMenuItem active" : "weChatDevelopmentMenuItem"}
                                onClick={() => this.handleChooseMenu(1)}
                            >
                                宣传展示
                            </div>
                            <div
                                className={currentMenu === 2 ? "weChatDevelopmentMenuItem active" : "weChatDevelopmentMenuItem"}
                                onClick={() => this.handleChooseMenu(2)}
                            >
                                推广互动
                            </div>
                            <div
                                className={currentMenu === 3 ? "weChatDevelopmentMenuItem active" : "weChatDevelopmentMenuItem"}
                                onClick={() => this.handleChooseMenu(3)}
                            >
                                营销活动
                            </div>
                            <div
                                className={currentMenu === 4 ? "weChatDevelopmentMenuItem active" : "weChatDevelopmentMenuItem"}
                                onClick={() => this.handleChooseMenu(4)}
                            >
                                电商交易
                            </div>
                        </div>
                        <div className="weChatDevelopmentList">
                            <img src={mobile} alt="mobile"/>
                            <span className={"weChatDevelopmentFunctionContainer"}>
                            <div className="weChatDevelopmentFunction">
                                <div className="weChatDevelopmentFunctionLeft">
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微网站</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>图文回复</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>LBS服务</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                </div>
                                <div className="weChatDevelopmentFunctionRight">
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>底部菜单</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微相册</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>模板消息</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>图文推送</div>
                                    </div>
                                </div>
                            </div>
                            <div className="weChatDevelopmentFunction">
                                <div className="weChatDevelopmentFunctionLeft">
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微投票</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微问卷</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微排队</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微推广</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                </div>
                                <div className="weChatDevelopmentFunctionRight">
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微海报</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微红包</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微打印</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微WIFI</div>
                                    </div>
                                </div>
                            </div>
                            <div className="weChatDevelopmentFunction">
                                <div className="weChatDevelopmentFunctionLeft">
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微社区</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微会员</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微信墙</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微现场</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                </div>
                                <div className="weChatDevelopmentFunctionRight">
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微游戏</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微抽奖</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>优惠券</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微积分</div>
                                    </div>
                                </div>
                            </div>
                            <div className="weChatDevelopmentFunction">
                                <div className="weChatDevelopmentFunctionLeft">
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微社区</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微会员</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微信墙</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem">
                                        <div>微现场</div>
                                        <img src={left_part} alt="left_part" height={10}/>
                                    </div>
                                </div>
                                <div className="weChatDevelopmentFunctionRight">
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微海报</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微红包</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微打印</div>
                                    </div>
                                    <div className="weChatDevelopmentFunctionItem1">
                                        <img src={right_part} alt="left_part" height={10}/>
                                        <div>微WIFI</div>
                                    </div>
                                </div>
                            </div>
                            </span>
                            <div className="weChatDevelopmentFunctionLogo">
                                <div className={"weChatDevelopmentFunctionLogoContainer"}>
                                    <img src={customized_icon} alt="logo"/>
                                    <img src={customized_icon1} alt="logo"/>
                                    <img src={customized_icon2} alt="logo"/>
                                    <img src={customized_icon3} alt="logo"/>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} =this.props;
        dispatch({num:4});
        $(document).scrollTop(0);
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    }

    /**
     * 处理选择菜单事件
     * @param num
     */
    handleChooseMenu(num) {
        this.setState({currentMenu: num});
        $('.weChatDevelopmentFunctionLogoContainer').children().animate({
            left: '100%',
            opacity: 0
        }).eq(num - 1).animate({left: '115px', opacity: 1}, 'slow');

        $('.weChatDevelopmentFunctionContainer').children().css({
            top: 0,
            opacity: 0
        }).stop(true, true).eq(num - 1).animate({opacity: 1}, 800).animate({top: '140px'}, 'slow');

    }

}

export default prop=>(
    <Consumer>
        {
            props=>(
                <CustomizedService {...props} {...prop}/>
            )
        }
    </Consumer>
)
//export default CustomizedService;